<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="./ibsheet/ibsheetinfo.js"></script>
<script src="./ibsheet/ibsheet.js"></script>
<script>
	var myPivot = null;
	var mySheet = null;
	
	$(document).ready(function() {
		
		init();
		createIBSheet2(document.getElementById("pivotArea"),"myPivot","100%","400px");
		
		//sheet 초기화
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var initData = {};
		initData.Cfg = {SearchMode:smLazyLoad, Page:50, MergeSheet:msHeaderOnly};
		initData.Cols = [
			{Header:"행/열 필드|부서명",Type:"Text", SaveName:"sDept", Width:80, Align:"Center",Edit:0},
			{Header:"행/열 필드|팀명",Type:"Text", SaveName:"sTeam", Width:80, Align:"Center",Edit:0},
			{Header:"행/열 필드|직급",Type:"Text", SaveName:"sPos", Width:80, Align:"Center",Edit:0},
			{Header:"행/열 필드|성명",Type:"Text", SaveName:"sName", Width:80, Align:"Center"},
			{Header:"행/열 필드|성별",Type:"Combo", SaveName:"sSex", Width:80, Align:"Center",ComboText:"男|女",ComboCode:"남|여"},
			{Header:"행/열 필드|연령대",Type:"Text", SaveName:"sAge2", Width:80, Align:"Center"},
			{Header:"행/열 필드|거주지1",Type:"Text", SaveName:"sAddr1", Width:80, Align:"Center"},
			{Header:"값 필드|나이",Type:"Int", SaveName:"sAge", Width:80, Align:"Right"},
			{Header:"값 필드|근속기간",Type:"Int", SaveName:"sYearOfService", Width:80, Align:"Right"},
			{Header:"값 필드|급여",Type:"Int", SaveName:"sSalary", Width:80, Align:"Right",Format:"#,### 원"},
			{Header:"값 필드|상여",Type:"Int", SaveName:"sBonus", Width:80, Align:"Right",Format:"#,### 원"}
		];
		initData.HeaderMode  = {ColMove:1};
		IBS_InitSheet(mySheet,initData);
		
		mySheet.SetDataAutoTrim(0);

		mySheet.FitColWidth();
		
		mySheet.SetRangeBackColor(0,0,0,6,"#3F73A5");
		mySheet.SetRangeFontColor(0,0,0,6,"#FFFFFF");
		mySheet.SetRangeBackColor(0,7,0,10,"#1F5385");
		mySheet.SetRangeFontColor(0,7,0,10,"#FFFFFF");
		
		doAction("search");
	});
	
	function init() {
// 		$('#pivotArea').hide();
// 		$('#viewArea').show();
	}
	
	function createCrossTable() {
		var rows		= $('#rows').val();
		var cols		= $('#cols').val();
		var value		= $('#value').val();
		var valueType	= $("#valueType option:selected").val();
		
// 		$('#viewArea').hide();
// 		$('#pivotArea').show();
		
		var info = {Rows:cols, Cols:rows, Value:value, ValueType:valueType};
		myPivot.Reset();
		myPivot.CreatePivotTable(info, mySheet);
		
		myPivot.FitColWidth();
	}
	
	function createPivotTable() {
		var rows		= $('#rows').val();
		var cols		= $('#cols').val();
		var value		= $('#value').val();
		var valueType	= $("#valueType option:selected").val();
		
// 		$('#viewArea').hide();
// 		$('#pivotArea').show();
		
		var info = {Rows:rows, Cols:cols, Value:value, ValueType:valueType};
		
// 		myPivot.Reset();
		myPivot.CreatePivotTable(info, mySheet);
		
// 		myPivot.FitColWidth();
	}
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("pivot_data.xml");
				break;
		}
	}
</script>
<title>예제</title>
</head>
<body>
<div id="main">
	<div id="title">예제</div>
	<br> 
	<div id="functionArea">
		<span>
			행(Rows) : <input type="text" size="4" id="rows" value="1|2|3">,
			열(Cols) : <input type="text" size="4" id="cols" value="5|6">,
			값(Value) : <input type="text" size="4" id="value" value="9">,
			타입(ValueType) :
			<select id="valueType">
				<option value="Sum" >합계</option>
				<option value="Count" selected>갯수</option>
			</select> 
			<input type="button" value="초기화" onclick="init()">
			<input type="button" value="피벗 적용" onclick="createPivotTable()">
		</span>
	</div>
	<br> 
	<div id="viewArea">
	</div>
	<div id="pivotArea">
	</div>
</div>
</body>
</html>